<template>
	<div class="system">
		<div class="main cf">
			<div class="left nav fl" :style="style" :class="leftWidth">
				<leftNav :data-list="navData" @collapse="systemNavWidth" ></leftNav>
			</div>
			<div class="right-c" style="height: 100%" :class="rightWidth">
				<router-view/>
			</div>
		</div>
	</div>
</template>
<script>
	import leftNav from '../../rdComponent/common/leftNav.vue'
	 export default {
	 	components:{
	 		leftNav
	 	},
	 	data(){
	 		return {
	 			activeIndex:'1',
	 			isCollapse:false,
	 			style:'',
	 			navData:[],
	 			leftWidth:'',
	 			rightWidth:''
	 		}	
	 	},
	 	mounted(){
          this.systemStyle()
          this.getNavList()
        },
	 	methods:{
	 		systemStyle(){//设置高度
	            this.clientHeight = document.documentElement.clientHeight
	            this.style = "min-height:"+(this.clientHeight-95)+'px;'
          	},
          	systemNavWidth(data){//接受子组件传参设置导航收缩
          		if(data){//收状态
          			console.log(data)
          			this.leftWidth = "left-narrow"
          			this.rightWidth="right-narrow"

          		}else{
          			this.leftWidth = "left-expand"
          			this.rightWidth="right-expand"
          		}
          	},
          	getNavList(){
          		let _this=this
          		var date=new Date();
				var timer=date.getTime().toString();
          		_this.axios.get('../../../static/data/nav.json?t='+timer)
		          .then((res) => {
		          	_this.navData = res.data.tree;
		            // console.log(res.data.tree)
		        })
          	}
	 	}
	 }
</script>
<style>
	.el-radio-button__inner{display:none!important;}
</style>
<style lang="less" scoped>
	.fl{float:left;}
	.fr{float: right;}
	.cf:after{clear:both;content:'';display: table;}
	.main{width:100%;height: 100%;
		.left{width:220px;}
		.right-c{margin-left:220px;}
	}
	.left-narrow{width:83px!important;}
	.right-narrow{margin-left:82px!important;}
	.left-expand{width:220px;}
	.right-expand{margin-left:220px!important;}
	.nav{position:fixed;border-right:18px solid #f5f5f5;transition: all .3s}
	// .el-menu-item:hover{background-color:rgba(212,243,255,1)!important;color:#fff!important;}
	// .el-submenu__title:hover{background-color: rgba(84,209,255,1)!important;color:#fff!important;}
	.system{width:100%;}
	.el-menu--collapse{width: 60px!important;}
</style>
